<template>
  <!--个人中心--编辑教育-->
  <div class="ziliao">
      <div class="titleWrap">
        <p class="titleName">编辑教育经历</p>
      </div>
      <div class="formWrapper">
        <Form ref="education"  :model="education" :label-width="102" :rules="educationRule" label-position="left" class="formMin" >
          <FormItem label="学校名称" prop="schoolName">
            <Input type="text" v-model="education.schoolName" placeholder="请输入学校名称" :maxlength="40"/>
          </FormItem>
          <FormItem label="就读时间" prop="studyStartTime">
            <DatePicker class="dateRight" :value="studyTime"  @on-change="getStart" type="daterange" placeholder="选择就读日期" value-format="yyyy-MM-dd" format="yyyy-MM-dd" style="width: 228px"></DatePicker>
          </FormItem>
          <FormItem label="学历" prop="education">
            <Select  v-model="education.education" placeholder="请选择学历">
              <Option :value="edu.code" v-for="edu in educationList" :key="edu.code">{{edu.name}}</Option>
            </Select>
          </FormItem>
          <FormItem label="专业" prop="major">
            <Select  v-model="education.major" placeholder="请选择专业">
              <Option :value="pro.code" v-for="pro in professionList" :key="pro.code">{{pro.name}}</Option>
            </Select>
          </FormItem>
          <FormItem label="是否统招" prop="unified">
            <RadioGroup v-model="education.unified">
              <Radio :label=1 >是</Radio>
              <Radio :label=2 >否</Radio>
            </RadioGroup>
          </FormItem>
          <FormItem label="证书编号" prop="certificateNo">
            <InputNumber  v-model="education.certificateNo" placeholder="请输入证书编号" :maxlength="30" style="width: 100%"/>
          </FormItem>
          <FormItem class="divformitem" style="width: 500px" prop="diploma">
            <div>
               <span class="upuser">
                 <Upload ref="diplomaup1" :show-upload-list="false" :format="['jpg','jpeg','png']" :headers="{Authorization:token}"
                     action="/base/file/upload"
                     :max-size="3072"
                     :before-upload="beforeUpload"
                     :on-exceeded-size="handleMaxSize"
                     :on-success="diploma1Success"
                     :on-format-error="formatError">
                     <div class="upload">
                          <img class="showimg" :src="education.diploma" v-if="education.diploma != ''&& education.diploma != 'undefined'"/>
                          <Icon  v-else type="ios-add" size="110" color="#dbdbdb"/>
                     </div>
                 </Upload>
               </span>
            </div>
            <div class="upload_tip">提示：上传图片最大尺寸800px，大小为3M以内</div>
          </FormItem>
          <FormItem label="职称" prop="academicTitle">
            <Input  v-model="education.academicTitle" placeholder="请输入职称" :maxlength="12"/>
          </FormItem>
          <FormItem label="级别" prop="grade">
            <Select  v-model="education.grade" placeholder="请选择级别">
              <Option :value="rank.code" :key="rank.code" v-for="rank in rankList">{{rank.name}}</Option>
            </Select>
          </FormItem>
          <FormItem label="证书照片" prop="academicImg" style="width: 500px">
            <div>
              <span class="upuser">
                <Upload ref="academicImgup1"  :format="['jpg','jpeg','png']" :show-upload-list="false" :headers="{Authorization:token}"
                    action="/base/file/upload"
                    :max-size="3072"
                    :before-upload="beforeUpload"
                    :on-exceeded-size="handleMaxSize"
                    :on-success="academicImg1Success"
                    :on-format-error="formatError">
                    <div class="upload">
                        <img class="showimg" :src="education.academicImg" v-if="education.academicImg != ''&& education.academicImg != 'undefined'"/>
                        <Icon  v-else type="ios-add" size="110" color="#dbdbdb"/>
                    </div>
                </Upload>
              </span>
            </div>
            <div class="upload_tip">提示：上传图片最大尺寸800px，大小为3M以内</div>
          </FormItem>
        </Form>
        <div class="keepThis"><span class="keepBtn" @click="save('education')">保存</span></div>
        <Spin fix v-show="isSpinShow" >
          <div class="loader">
            <Icon type="ios-loading" size=26 class="demo-spin-icon-load"></Icon>
            <div class="font14">{{showTitle}}</div>
          </div>
        </Spin>
      </div>
  </div>
</template>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less" rel="stylesheet/less">
  /* 旋转效果 */
  .demo-spin-icon-load{
    animation: ani-demo-spin 1s linear infinite;
  }
  @keyframes ani-demo-spin {
    from { transform: rotate(0deg);}
    50% { transform: rotate(180deg);}
    to { transform: rotate(360deg);}
  }
  /* 假如内容过长，一屏放不下，滚动条下拉覆盖不全 */
  .ivu-spin-fix {
    position: fixed;
  }

  .upload {
    display: inline-block;
    cursor: pointer;
    background-color: #f9f9f9;
    border:1px dashed #e1e1e1;
    width: 200px;
    text-align: center;
  }
  .upload_tip{
    text-align: left;
    color: #FF0000;
  }
  .formWrapper{
    width: 330px;
    .dateContent{
      width: 800px;
      .ivu-form-item{
        float: left;
      }
      .ivu-form-item:last-child{
        margin-left: -80px;
      }
    }
  }

  .keepBtn {
    display: inline-block;
    width: 140px;
    height: 52px;
    background-color: #957960;
    text-align: center;
    line-height: 50px;
    color: #fff;
    font-size: 18px;
  }
  .keepBtn:hover {
    cursor: pointer;
  }
  .titleWrap {
    height: 40px;
    font-size: 20px;
    padding-bottom: 20px;
    color: #333;
    text-align: justify-all;
    border-bottom: 1px solid #E1E1E1;
    margin-bottom: 30px;
    .titleName {
      float: left;
      line-height: 24px;
      font-size: 14px;
    }
  }
  .showimg {
    display: inline-block;
    width: 244px;
    height: 200px;
    overflow: hidden;
    vertical-align: bottom;
  }
  .upuser {
    display: inline-block;
    font-size: 16px;
    color: #333;
    cursor: pointer;
  }
  .keepThis {
    padding: 10px 0 0 102px;
  }
  .layoutSide {
    position: relative;
  }
</style>
<script type="text/ecmascript-6">
  import {educationList,updateEducation,centreInfoWeb} from '../../http'
  import {getStore} from '../../storage'
    export default {
        inject:['reload'],
        name: '',
        props: {},
        data() {
          //自定义验证规则
          const studyStartTimeRule = (rule,value,callback) => {
            if (this.education.studyStartTime === '' || this.education.studyStartTime === undefined) {
              callback(new Error());
            }else{
              callback();
            }
          };
          const studyEndTimeRule = (rule,value,callback) => {
            if (this.education.studyEndTime === '' || this.education.studyEndTime === undefined) {
              callback(new Error());
            }else{
              callback();
            }
          };
          return {
              isSpinShow:false,
              formValidate:{
                radio:'yes'
              },
              showTitle: '加载中...',
              token:getStore('token'),        //上传文件使用
              education:{                     //教育经历
                academicImg: '',              //职称证书
                academicTitle: '',            //职称
                certificateNo: 0,            //证书编号
                diploma: '',                  //毕业证书
                education: '',                //学历
                grade: '',                    //级别
                id: '',
                isEducation:2,                //是否认证
                major: '',                    //专业
                schoolName: '',               //学校名称
                studyEndTime: '',             //就读结束时间
                studyStartTime: '',           //解读开始时间
                unified: 2,                   //是否统招
              },
              studyTime: [],
              educationList:'',               //学历选择
              professionList:'',              //专业选择
              rankList:'',                    //级别选择
              //表单验证规则
              educationRule:{
                studyStartTime:[
                  { required:true, message: '请选择就读时间', trigger: 'blur'}
                ],
                studyEndTime:[
                  { required:true, message: '请选择就读时间', trigger: 'blur'}
                ],
                schoolName:[
                  { required:true, message: '请填写学校名称', trigger: 'blur'}
                ],
                studyStartTime:[
                  { validator:studyStartTimeRule,message: '请选择就读开始时间', trigger: 'blur'}
                ],
                studyEndTime:[
                  { validator:studyEndTimeRule, message: '请选择就读结束时间', trigger: 'blur'}
                ],
                education:[
                  {required:true, message: '请选择学历', trigger: 'change'}
                ],
                major:[
                  {required:true, message: '请选择专业', trigger: 'change'}
                ],
                unified:[
                  {required:true, message: '请选择统招', trigger: 'change', type:'number'}
                ],
                certificateNo:[
                  {required:true, type: 'number', message: '证书编号不正确', trigger: 'blur'}
                ],
                /*diploma:[
                  {required:true, message: '请上传证书', trigger: 'change'}
                ],
                academicTitle:[
                  {required:true, message: '请输入职称', trigger: 'blur'}
                ],
                academicImg:[
                  {required:true, message: '请上传证书', trigger: 'change'}
                ],
                grade: [
                  {required:true, message: '请选择级别', trigger: 'change'}
                ],*/
              },
            };
        },
        methods: {
          //上传证件超出大小2M限制
          handleMaxSize (file) {
            this.isSpinShow = false
            this.showTitle = '加载中...'
            this.$Notice.warning({
              title: '证件上传失败',
              desc: '您上传的图片超过3M，无法上传。'
            });
          },
          //格式错误提醒
          formatError(){
            this.isSpinShow = false
            this.showTitle = '加载中...'
            this.$Notice.warning({
              title:"证件上传失败",
              desc:"图片格式错误，请上传图片",
              duration: 3,
            });
          },
          //上传
          diploma1Success(response){
            console.info(response)
            this.isSpinShow = false
            this.showTitle = '加载中...'
            if(response.code === 200){
              this.$set(this.education,'diploma',response.data.fileUrl);
            }else{
              this.$Notice.warning({
                title:'证件上传失败',
                desc:'上传不成功，请重新上传',
                duration: 3,
              });
            }
          },
          beforeUpload(){
            this.showTitle = '文件上传中...'
            this.isSpinShow = true
          },
          //上传
          diploma2Success(response){
            console.info(response)
            this.isSpinShow = false
            this.showTitle = '加载中...'
            if(response.code === 200){
              this.$set(this.education,'diploma',response.data.fileUrl);
            }else{
              this.$Notice.warning({
                title:'证件上传失败',
                desc:'上传不成功，请重新上传',
                duration: 3,
              });
            }
          },
          //上传
          academicImg1Success(response){
            console.info(response)
            this.isSpinShow = false
            this.showTitle = '加载中...'
            if(response.code === 200){
              this.$set(this.education,'academicImg',response.data.fileUrl);
            }else{
              this.$Notice.warning({
                title:'证件上传失败',
                desc:'上传不成功，请重新上传',
                duration: 3,
              });
            }
          },
          //上传
          academicImg2Success(response){
            console.info(response)
            this.isSpinShow = false
            this.showTitle = '加载中...'
            if(response.code === 200) {
              this.$set(this.education,'academicImg',response.data.fileUrl);
            }else{
              this.$Notice.warning({
                title:'证件上传失败',
                desc:'上传不成功，请重新上传',
                duration: 3,
              });
            }
          },
          getStart(value){
            this.education.studyStartTime = value[0];
            this.education.studyEndTime = value[1];
          },
          getEnd(value){
            this.education.studyEndTime = value;
          },
          //教育经历保存
          save (name){
            if(this.isSpinShow === false) {
              this.isSpinShow = true;
              //表单验证
              this.$refs.education.validate(valid => {
                if (valid) {
                  //用户是否登录
                  centreInfoWeb().then(res => {
                    if (res.code === 200) {
                      //没有教育经历，保存
                      if (this.education.id === undefined) {
                        updateEducation({
                          schoolName: this.education.schoolName,
                          education: this.education.education,
                          major: this.education.major,
                          studyStartTime: this.education.studyStartTime,
                          studyEndTime: this.education.studyEndTime,
                          unified: this.education.unified,
                          certificateNo: this.education.certificateNo,
                          academicTitle: this.education.academicTitle,
                          grade: this.education.grade,
                          diploma: this.education.diploma,
                          academicImg: this.education.academicImg
                        }).then(res => {
                          this.isSpinShow = false;
                          if (res.code === 200) {
                            this.$Notice.success({
                              title: '教育经历提醒',
                              desc: '教育经历修改成功!',
                              duration: 3,
                            });
                            this.$router.push({
                              name: 'ziliao'
                            })
                          }else {
                            this.$Notice.warning({
                              title: "教育经历提醒",
                              desc: res.info,
                              duration: 3,
                            });
                          }
                        }).catch()
                      } else {
                        //已有教育经历，保存
                        updateEducation({
                          id: this.education.id,
                          schoolName: this.education.schoolName,
                          education: this.education.education,
                          major: this.education.major,
                          studyStartTime: this.education.studyStartTime,
                          studyEndTime: this.education.studyEndTime,
                          unified: this.education.unified,
                          certificateNo: this.education.certificateNo,
                          academicTitle: this.education.academicTitle,
                          grade: this.education.grade,
                          diploma: this.education.diploma,
                          academicImg: this.education.academicImg
                        }).then(res => {
                          this.isSpinShow = false;
                          if (res.code === 200) {
                            this.$Notice.success({
                              title: '教育经历提醒',
                              desc: '教育经历修改成功!',
                              duration: 3,
                            });
                            this.$router.push({
                              name: 'ziliao'
                            })
                          }else {
                            this.$Notice.warning({
                              title: "教育经历提醒",
                              desc: res.info,
                              duration: 3,
                            });
                          }
                        }).catch()
                      }
                    } else {
                      this.isSpinShow = false;
                      this.$parent.$refs.loginInput.showModal()
                    }
                  }).catch()
                } else {
                  this.isSpinShow = false;
                  this.$Notice.warning({
                    title: '教育经历提醒',
                    desc: '教育经历修改失败!',
                    duration: 3,
                  });
                }
              })
            }
          },
          getEditJiao(){
            if(this.isSpinShow === false) {
              this.isSpinShow = true;
              //用户是否登录
              centreInfoWeb().then(res => {
                if (res.code === 200) {
                  //获取教育经历页面信息
                  educationList().then(res => {
                    if(res.code === 200) {
                      if(JSON.stringify(res.data.education) != '{}'){
                        res.data.education.certificateNo = parseInt(res.data.education.certificateNo)
                      }else{
                        res.data.education.certificateNo = 0
                      }
                      this.isSpinShow = false;
                      this.education = res.data.education;
                      if(this.education.academicTitle == 'undefined'){
                        this.education.academicTitle = ''
                      }
                      this.educationList = res.data.educationList;
                      this.professionList = res.data.professionList;
                      this.rankList = res.data.rankList;
                      if(this.education.unified == '' || this.education.unified == null || this.education.unified == undefined){
                        this.education.unified = 2;
                      }
                      this.studyTime = [this.education.studyStartTime, this.education.studyEndTime]
                    }else {
                      this.isSpinShow = false;
                      this.$Notice.warning({
                        title: "个人中心提醒",
                        desc: res.info,
                        duration: 3,
                      });
                    }
                  }).catch();
                }else {
                  this.isSpinShow = false;
                }
              }).catch()
            }
          }
        },
        created() {
          this.getEditJiao()
        },
        components: {
        },
    }

</script>
